<template>
    <div>
        <!--新增按钮位置-->
        <div style="position:fixed;z-index:100;width:100%">
            <div role="button" tabindex="0" @click="addOne"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--add"
                style="position:fixed;width:33%;">
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加学生</div><i
                    class="van-icon van-icon-arrow van-cell__right-icon">
                </i>
            </div>
            <div role="button" tabindex="0" @click="addBatch"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--add"
                style="position:fixed;width:34%;left:33%">
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">批量添加</div><i
                    class="van-icon van-icon-arrow van-cell__right-icon">
                </i>
            </div>
            <div style="position:fixed;width:33%;left:67%;padding: 2px;" class="van-cell--borderless van-contact-card">
                <van-dropdown-menu title="班级选择">
                    <van-dropdown-item v-model="value1" :options="option1" @change="changeClass" />
                </van-dropdown-menu>
            </div>
        </div>
        <!--列表展示位置-->
        <div v-show="show == 0">
            <div style="height: 73px"></div>
            <div role="button" tabindex="0" index="0" v-for="(item, index) in list" :item="item"
                @click="editStudent(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>姓名：{{ item.userNick }}</div>
                    <div>班级：{{ className }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <div style="height: 73px"></div>
        </div>
        <!--单个添加学生信息-->
        <div v-show="show == 1">
            <div style="height: 73px"></div>
            <van-form @submit="addStudnet">
                <van-field v-model="userNick" name="userNick" label="学生名称"
                    :rules="[{ required: true, message: '请填写学生名称' }]" />
                <van-field name="userGender" label="性别">
                    <template #input>
                        <van-radio-group v-model="userGender" direction="horizontal">
                            <van-radio name="0">女 </van-radio>
                            <van-radio name="1">男 </van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-model="userPhone" name="userPhone" label="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />

                <van-field v-model="userName" name="userName" label="账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <!-- <van-field v-model="password" type="password" name="password" label="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" /> -->
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
        <!--批量添加学生信息-->
        <div v-show="show == 2">
            <div style="height: 73px"></div>
            <van-button round block type="info" @click="download">模板下载</van-button>
            <van-uploader :max-size="1024 * 1024" :max-count="1" :after-read="afterRead" accept=".xls,.xlsx">
                <van-button icon="plus" type="primary">上传文件</van-button>
            </van-uploader>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
        <!--xiugai学生信息-->
        <div v-show="show == 3">
            <div style="height: 73px"></div>
            <van-form @submit="editStudnet">
                <van-field v-model="userNick" name="userNick" label="学生名称"
                    :rules="[{ required: true, message: '请填写学生名称' }]" />
                <van-field name="userGender" label="性别">
                    <template #input>
                        <van-radio-group v-model="userGender" direction="horizontal">
                            <van-radio name="0">女 </van-radio>
                            <van-radio name="1">男 </van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-model="userPhone" name="userPhone" label="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />

                <van-field v-model="userName" name="userName" label="账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <!-- <van-field v-model="password" type="password" name="password" label="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" /> -->
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="danger" @click="delStu">删除</van-button>
            </div>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
    </div>
</template>
<style>
.van-dropdown-menu__bar {
    height: 68px;
}
</style>
<script>
import req from '../../request/index'
import { UploadFile, DownLoadFile } from '../../request/FileHttpRequestUtil'
export default {
    name: '',
    data() {
        return {
            userNick: "",
            userGender: "0",
            userPhone: "",
            userName: "",
            password: "",
            show: 0,
            //代表当前选中的班级id
            value1: 0,
            className: "",
            //该班级学生的学生信息
            list: [],
            //该用户所管理的班级信息
            option1: [],
            stuId:'',
        };
    },
    methods: {
        delStu(){
            req({
                url: "delStu",
                method: "post",
                data: {
                    id:this.stuId
                }
            }).then(res => {
                console.log(res);
                this.back();
            }).catch(err => {
                console.log(err);
            }) 
        },
        editStudnet(values){
            values.id = this.stuId;
            console.log(values)
            req({
                url: "editStudnet",
                method: "post",
                data: values
            }).then(res => {
                console.log(res);
                this.back();
            }).catch(err => {
                console.log(err);
            })
        },
        back() {
            this.show = 0;
            this.getStudentByClassId();
        },
        download() {
            DownLoadFile("/api/down", {});
        },
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // console.log(file);
            var data = new FormData();
            data.append("file", file.file)
            UploadFile("/api/studentAddM", data, function (params) {
                console.log(params)
            })
        },
        addStudnet(values) {
            values.status = this.value1;
            values.userType = 0;
            console.log(values);
            //发送请求
            req({
                url: "addStudnet",
                method: "post",
                data: values
            }).then(res => {
                this.$dialog.alert({
                    message: res.data.msg,
                })
                this.back();
            }).catch(err => {
                console.log(err);
            })
        },
        addOne() {
            this.show = 1;
            this.userNick = '';
            this.userGender = '0';
            this.userPhone = '';
            this.userName = '';
            this.password = '';
        },
        addBatch() {
            this.show = 2;
        },
        editStudent(item) {
            console.log(item)
            this.show = 3;
            this.userNick = item.userNick;
            this.userGender = item.userGender+'';
            this.userPhone = item.userPhone;
            this.userName = item.userName;
            this.password = item.password;
            this.stuId = item.id;
            console.log(this.userGender)
        },
        changeClass(res) {
            this.getStudentByClassId();
            for (var i = 0; i < this.option1.length; i++) {
                if (this.option1[i].value == res) {
                    this.className = this.option1[i].text;
                }
            }
        },
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "post",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.value1 = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.option1.push(x);
                    }
                    //发请求 获取当前班级下所有的学生信息
                    this.getStudentByClassId();
                }
            }).catch(err => {
                console.log(err);
            })
        },
        getStudentByClassId() {
            req({
                url: "getStudentByClassId",
                method: "post",
                data: {
                    id: this.value1
                }
            }).then(res => {
                console.log(res);
                this.list = res.data.data;
            }).catch(err => {
                console.log(err);
            })
        }
    },
    computed: {
    },
    mounted() {
        //发送请求 获取该用户的所有班级信息
        this.getClassInfo();
    },
}
</script>